<!-- 我的发票 -->
<template>
  <view class="page black-ground invoice-page">
    <div class="page-title">我的发票 My Invoice</div>
    <div class="wrap">
      <div class="li" v-for="item in list" :key="item.id">
        <div class="title">
          {{ item.name }}<br />
          {{ item.enName }}
        </div>
        <div class="mini">开票合计金额 Total invoicing amount ¥ {{ money }}</div>
        <div class="mini">发票抬头 Invoice Title {{ item.title }}</div>
        <div class="mini">申请日期 Time {{ item.invoiceTime }}</div>
        <div class="mini">开票中 Invoicing</div>
      </div>

      <uni-load-more :status="loading ? 'loading' : noMore ? 'noMore' : 'more'" />
    </div>
  </view>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import { onReachBottom, onLoad } from '@dcloudio/uni-app'
import { orderInvoiceList } from '@/utils/api/orderInvoice'

const store = useStore()
// 当前页码
let current = ref<number>(1)
// 每页数量
const size = ref<number>(10)
// 列表数据
const list = ref<any[]>([])
// 是否正在加载
const loading = ref<boolean>(false)
// 是否还有更多数据
const noMore = ref<boolean>(false)
// clientUserId 从 vuex 获取用户 id
const clientUserId = computed(() => store.state.user.userInfo.id)

// 请求方法（无 try/catch）
const loadData = (isRefresh: boolean = false) => {
  if (loading.value) return // 防止重复请求

  if (isRefresh) {
    current.value = 1
    noMore.value = false
    list.value = []
  }

  loading.value = true

  const params = {
    current: current.value,
    clientUserId: clientUserId.value,
    size: size.value
  }

  orderInvoiceList(params).then((res: any) => {
    if (res.code === 200) {
      if (res.data.list && res.data.list.length > 0) {
        list.value = [...list.value, ...res.data.list]
        current.value++
        if (!res.data.next) {
          noMore.value = true
        }
      } else {
        noMore.value = true
      }
    }

    loading.value = false
  })
}

// 页面初次加载
onLoad(() => {
  loadData(true)
})

// 上拉加载更多
onReachBottom(() => {
  if (!noMore.value && !loading.value) {
    loadData()
  }
})

onPullDownRefresh(() => {
  loadData(true).finally(() => {
    uni.stopPullDownRefresh()
  })
})
</script>
<style lang="scss" scoped>
.invoice-page {
  .li {
    .mini {
      font-size: 24rpx;
      line-height: 36rpx;
      margin-bottom: 30rpx;
    }
  }
}
</style>
